<template>
  <div :style="{
            left: start.x + 'px',
            top: start.y + 'px',
            width: width + 'px',
            height: height + 'px',
        }" class="area"></div>
</template>
<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "canvas-area",
  props: {
    start: {
      type: Object,
      default: () => {
        return {
          x:0,
          y:0,
        }
      },
    },
    width: {
      type: Number,
      default: 0,
    },
    height: {
      type: Number,
      default: 0,
    },
  },
  setup() {
    return {};
  },
});
</script>
<style lang="less" scoped>
.area {
  border: 1px solid #70c0ff;
  position: absolute;
}
</style>